<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>router</title>
</head>
<body>
    <div id="app">
         <a href="/http">新闻</a>
         |
         <a href="/his">社交</a>
         <div id="con"></div>
    </div>
</body>
</html>
<script>
    /**
     * @哈希值变化不会像服务端发起请求
     * 兼容性好
     * 
    */
    //has值变化时候调用
    //   onhashchange = function(){
    //          let hash = location.hash
    //           switch (hash){
    //             case "#http://www.baidu.com":
    //              con.innerHTML="嘿嘿嘿"
    //              break;
    //             case "#/his":
    //              con.innerHTML="追到我就给你嘿嘿嘿"
    //              break;
    //           }
    //   }

    //用h5给history对象新增的方法:pushState  replaceState
    let aa = document.querySelectorAll("a");
    aa.forEach((t)=>{
         t.onclick = function(e){
            //阻止浏览器的默认行为
            e.preventDefault();
             console.log(this.getAttribute("href"));
             //嗲用history
             //浏览器的不会立即请求
             //刷新就变为404
             history.pushState({name:"cxk"},null,URL)
         }
    });
    //history模式监听事件
    //需要点浏览器的前进和返回按钮
    //必须后端配合
    onpopstate = function(e){
        console.log(e);
    }
</script>